<template>
    <div class="page-container-tab" v-loading="loading">
        <div class="page-filter-option mb-3">
            <el-form :inline="true" :model="filterOption" class="flex flex-wrap">
                <el-form-item v-if="initStatus">
                    <component-page-org-tree-option-check v-model="filterOption.plat_code" @change="filterChange"></component-page-org-tree-option-check>
                </el-form-item>
                <el-form-item v-if="initStatus">
                    <component-page-org-tree-option-check v-model="filterOption.plat_code_exclude" @change="filterChange" :placeholder="$t('platform.setting.tree.org-exclude')"></component-page-org-tree-option-check>
                </el-form-item>
                <el-form-item v-if="initStatus">
                    <component-page-option-currency v-model="filterOption.currency" @change="filterChange"></component-page-option-currency>
                </el-form-item>
                <el-form-item v-if="initStatus">
                    <component-page-option-currency v-model="filterOption.currency_exclude" @change="filterChange" :placeholder="$t('game.setting.currency.exclude')"></component-page-option-currency>
                </el-form-item>
                <el-form-item v-if="initStatus">
                    <component-page-option-datetime-range type="daterange" align="center" defaultShortcuts :init-last-day="1"
                                                          v-model="filterOption.datetime" @change="filterChange">
                    </component-page-option-datetime-range>
                </el-form-item>
                <el-form-item>
                    <el-button @click="filterChange">{{ $t('action.search') }}</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="danger" @click="exports">{{ $t('action.export') }}</el-button>
                </el-form-item>
            </el-form>
        </div>
        <component-page-summary class="mb-3" init-more v-slot="{ option }">
            <el-row :gutter="10">
                <el-col :xl="12">
                    <el-form :inline="true" class="detail">
                        <strong>{{ $t('form.summary') }} (USD)</strong><br>
                        <el-form-item :label="$t('stats.platform.settlement.bet_base')">
                            <component-page-numeral :num="dataStats.usd.bet_base" format="0,0.[00]"></component-page-numeral>
                        </el-form-item>
                        <el-form-item :label="$t('stats.platform.settlement.bet_num')">
                            <component-page-numeral :num="dataStats.usd.bet_num" format="0,0.[00]"></component-page-numeral>
                        </el-form-item>
                        <el-form-item :label="$t('stats.platform.settlement.gain_player')">
                            <component-page-numeral :num="dataStats.usd.gain_player" format="0,0.[00]"></component-page-numeral>
                        </el-form-item>
                        <!--<el-form-item :label="$t('stats.platform.settlement.amount')">
                            <component-page-numeral :num="dataStats.usd.amount" format="0,0.[00]"></component-page-numeral>
                        </el-form-item>-->
                        <el-form-item :label="$t('stats.platform.settlement.doc_count')">
                            <component-page-numeral :num="dataStats.usd.doc_count"></component-page-numeral>
                        </el-form-item>
                        <el-form-item :label="$t('stats.platform.settlement.player_count')">
                            <component-page-numeral :num="dataStats.usd.player_count"></component-page-numeral>
                        </el-form-item>
                    </el-form>
                </el-col>
                <el-col :xl="12" v-for="(item,index) in dataStats.sts" :key="index" v-if="option.more">
                    <el-form :inline="true" class="detail">
                        <strong>{{ item.currency }}</strong><br>
                        <el-form-item :label="$t('stats.platform.settlement.bet_base')">
                            <component-page-numeral :num="item.bet_base"></component-page-numeral>
                        </el-form-item>
                        <el-form-item :label="$t('stats.platform.settlement.bet_num')">
                            <component-page-numeral :num="item.bet_num"></component-page-numeral>
                        </el-form-item>
                        <el-form-item :label="$t('stats.platform.settlement.gain_player')">
                            <component-page-numeral :num="item.gain_player"></component-page-numeral>
                        </el-form-item>
                        <!--<el-form-item :label="$t('stats.platform.settlement.amount')">
                            <component-page-numeral :num="item.amount"></component-page-numeral>
                        </el-form-item>-->
                        <el-form-item :label="$t('stats.platform.settlement.doc_count')">
                            <component-page-numeral :num="item.doc_count"></component-page-numeral>
                        </el-form-item>
                        <el-form-item :label="$t('stats.platform.settlement.player_count')">
                            <component-page-numeral :num="item.player_count"></component-page-numeral>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </component-page-summary>
        <div class="page-container-inner-fluid flex-auto flex flex-col">
            <component-page-content-resize v-slot="{ content }">
                <el-table style="width: 100%" :height="content.height" ref="table"
                          :data="dataList"
                          :default-sort="{prop: filterOption.order_column, order: filterOption.order_key}"
                          @sort-change="filterOrderChange"
                          highlight-current-row>
                    <el-table-column min-width="200" :label="$t('platform.setting.tree.org')" prop="plat_code">
                        <template slot-scope="scope">{{ scope.row.org.name || scope.row.plat_code }}</template>
                    </el-table-column>
                    <el-table-column min-width="150" :label="$t('game.setting.currency.name')" prop="currency"></el-table-column>
                    <el-table-column min-width="150" :label="$t('stats.platform.settlement.bet_base')" prop="bet_base" sortable="custom" :sort-orders="['descending', 'ascending']">
                        <template slot-scope="scope">
                            <component-page-numeral :num="scope.row.bet_base"></component-page-numeral>
                        </template>
                    </el-table-column>
                    <el-table-column min-width="150" :label="$t('stats.platform.settlement.bet_num')" prop="bet_num" sortable="custom" :sort-orders="['descending', 'ascending']">
                        <template slot-scope="scope">
                            <component-page-numeral :num="scope.row.bet_num"></component-page-numeral>
                        </template>
                    </el-table-column>
                    <el-table-column min-width="150" :label="$t('stats.platform.settlement.gain_player')" prop="gain_player" sortable="custom" :sort-orders="['descending', 'ascending']">
                        <template slot-scope="scope">
                            <component-page-numeral :num="scope.row.gain_player"></component-page-numeral>
                        </template>
                    </el-table-column>
                    <!--<el-table-column min-width="150" :label="$t('stats.platform.settlement.amount')" prop="amount" sortable="custom" :sort-orders="['descending', 'ascending']">
                        <template slot-scope="scope">
                            <component-page-numeral :num="scope.row.amount"></component-page-numeral>
                        </template>
                    </el-table-column>-->
                    <el-table-column min-width="150" :label="$t('stats.platform.settlement.doc_count')" prop="doc_count" sortable="custom" :sort-orders="['descending', 'ascending']">
                        <template slot-scope="scope">
                            <component-page-numeral :num="scope.row.doc_count"></component-page-numeral>
                        </template>
                    </el-table-column>
                    <el-table-column min-width="150" :label="$t('stats.platform.settlement.player_count')" prop="player_count" sortable="custom" :sort-orders="['descending', 'ascending']">
                        <template slot-scope="scope">
                            <component-page-numeral :num="scope.row.player_count"></component-page-numeral>
                        </template>
                    </el-table-column>
                    <el-table-column min-width="150" :label="$t('stats.platform.settlement.timed')" prop="timed" sortable="custom" :sort-orders="['descending', 'ascending']" fixed="left">
                        <template slot-scope="scope">
                            <component-page-timestamp timezone="PRC" :timestamp="scope.row.timed" type="day"></component-page-timestamp>
                        </template>
                    </el-table-column>
                    <el-table-column width="100" :label="$t('stats.platform.settlement.operation')" align="right" fixed="right">
                        <template slot-scope="scope">
                            <span class="operation-options-icon">
                                <i class="el-icon-view" @click="drawerItemDetails(scope)"></i>
                            </span>
                        </template>
                    </el-table-column>
                </el-table>
            </component-page-content-resize>
            <div class="text-right p-4">
                <el-pagination background layout="total, sizes, prev, pager, next, jumper"
                               :current-page="filterOption.page"
                               :page-size.sync="filterOption.page_size"
                               :total="dataMeta.total"
                               @size-change="filterChange"
                               @current-change="filterPageChange">
                </el-pagination>
            </div>
        </div>
        <item-details :visible.sync="drawer.visible.details" :data="itemCache"></item-details>
    </div>
</template>

<script>
import ItemDetails from './ItemDetails.vue'

export default {
    components: {
        ItemDetails,
    },
    props: ['activeName'],
    data() {
        return {
            initStatus: false,
            loading: false,
            filterOption: {
                plat_code: [],
                plat_code_exclude: [],
                currency: [],
                currency_exclude: [],
                datetime: null,
                datetime_column: 'timed',
                page: 1,
                page_size: 30,
                order: 'desc',
                order_key: 'descending',
                order_column: 'timed',
            },
            dataStats: {
                usd: {},
                sts: [],
            },
            dataMeta: {
                total: 0,
            },
            dataList: [],
            itemCache: {},
            drawer: {
                visible: {
                    details: false,
                }
            }
        }
    },
    watch: {
        activeName: {
            immediate: true,
            handler(n, o) {
                if (n == 'all' && !this.initStatus) {
                    // 标记初始化
                    this.initStatus = true;
                }
            }
        },
    },
    methods: {
        clearFilterOption() {
            this.loading = true;
            this.filterOption.page = 1;
        },
        filterChange() {
            this.clearFilterOption();
            this.getDataList();
        },
        filterPageChange(page) {
            this.loading = true;
            this.filterOption.page = page;
            this.getDataList();
        },
        filterOrderChange(scope) {
            this.clearFilterOption();
            this.filterOption.order = scope.order == 'ascending' ? 'asc' : 'desc';
            this.filterOption.order_key = scope.order;
            this.filterOption.order_column = scope.prop;
            this.getDataList();
        },
        getDataList() {
            axios.get('/stats/platform/settlement/all', {
                params: this.filterOption
            }).then((response) => {
                if (response.data.resp_msg.code == 200) {
                    this.dataStats = response.data.resp_data.stats;
                    this.dataMeta = response.data.resp_data.meta;
                    this.dataList = response.data.resp_data.data;
                } else {
                    this.$message({
                        type: 'error',
                        message: response.data.resp_msg.message,
                        showClose: true
                    });
                }
                this.loading = false;
            })
        },
        // 导出数据
        exports() {
            window.open(this.$helper.makeQueryUrl('/stats/platform/settlement/exportAll', this.filterOption));
        },
        // 打开抽屉（详情）
        drawerItemDetails(scope) {
            // 缓存数据
            this.itemCache = scope.row;
            // 显示抽屉
            this.drawer.visible.details = true;
        },
    }
}
</script>

<style lang="scss">

</style>
